<template>
	<div>

		<div class="block" style="margin-bottom: 10px;display: flex;justify-content: space-between;">
			<div></div>
			<el-date-picker v-model="params.year" type="year" placeholder="选择日期" value-format="yyyy" :clearable="false"
				@change="getGasPollutionStatistics()" style="width: 100px;background: #E7EFF9;">
			</el-date-picker>
		</div>

		<div style="background: #fff;margin-bottom: 20px;border-radius: 4px;padding: 10px;border-radius: 8px;">
			<div
				style="margin-bottom: 10px;font-size: 16px;font-weight: bold;padding-bottom: 10px;border-bottom: 1px solid#e7e7e7;">
				排放统计</div>
			<div>
				<el-table :data="dataList1" style="width: 100%" size="mini">
					<el-table-column prop="pollutionName" label="污染物" width="180">
						<div slot-scope="scope">
							<span>{{scope.row.pollutionName}}</span>
							<span>（{{scope.row.qtyUnit}}）</span>
						</div>
					</el-table-column>

					<el-table-column prop="YTD" label="年排放量">
					</el-table-column>
					<el-table-column prop="Jan" label="一月">
					</el-table-column>
					<el-table-column prop="Feb" label="二月">
					</el-table-column>
					<el-table-column prop="Mar" label="三月">
					</el-table-column>
					<el-table-column prop="Apr" label="四月">
					</el-table-column>
					<el-table-column prop="May" label="五月">
					</el-table-column>
					<el-table-column prop="Jun" label="六月">
					</el-table-column>
					<el-table-column prop="Jul" label="七月">
					</el-table-column>
					<el-table-column prop="Aug" label="八月">
					</el-table-column>
					<el-table-column prop="Sep" label="九月">
					</el-table-column>
					<el-table-column prop="Oct" label="十月">
					</el-table-column>
					<el-table-column prop="Nov" label="十一月">
					</el-table-column>
					<el-table-column prop="Dec" label="十二月">
					</el-table-column>
				</el-table>
			</div>
		</div>

		
	</div>
</template>

<script>
	import moment from 'moment'
	let that
	export default {
		name: '',
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					//year: "2023"
				},
				dataList1: [],
				dataList2: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getGasPollutionStatistics()
			
		},
		methods: {
			getGasPollutionStatistics() {
				that.ajax({
					url: 'outletDetail/getGasPollutionStatistics',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						that.dataList1 = result.data
					},
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	>>>.el-input__inner,
	.el-textarea__inner {
		background: #E7EFF9;
	}

	::v-deep .el-table th {
		background: #EAF1FB;
	}
</style>